<template>
  <div class="city-picker">
    <div class="col province">
      <div class="title">省份</div>
      <div class="select-box">
        <el-checkbox
          class="all-check"
          :indeterminate="true"
          v-model="provinceInfo.checkAll"
        >
          全选
        </el-checkbox>
        <div
          :class="{ touched: index == provinceInfo.touchedId || item.checked }"
          class="select"
          v-for="(item, index) of showProvinceList"
          :key="index"
        >
          <!-- 省单选 -->
          <el-checkbox
            v-model="item.checked"
          ></el-checkbox>
          <p @click="onChoose('province', index)">
            {{ item.name }} <i class="el-icon-arrow-right"></i>
          </p>
        </div>
      </div>
    </div>
    <div class="col city">
      <div class="title">城市</div>
      <div class="select-box">
        <el-checkbox
          class="all-check"
          :indeterminate="true"
          v-model="cityInfo.checkAll"
        >
          全选
        </el-checkbox>
        <div
          class="select"
          :class="{ touched: index == cityInfo.touchedId || item.checked }"
          v-for="(item, index) of showCityList"
          :key="index"
        >
          <!-- 市单选 -->
          <el-checkbox
            :indeterminate="true"
            v-model="item.checked"
          ></el-checkbox>
          <p @click="onChoose('city', index)">
            {{ item.name }}
            <i v-show="hasNext" class="el-icon-arrow-right"></i>
          </p>
        </div>
      </div>
    </div>
    <div class="col distingct" v-if="true">
      <div class="title">区</div>
      <div class="select-box">
        <el-checkbox
          class="all-check"
          :indeterminate="true"
          v-model="distingctInfo.checkAll"
        >
          全选
        </el-checkbox>
        <div
          class="select"
          :class="{ touched: index == distingctInfo.touchedId || item.checked }"
          v-for="(item, index) of showDistingct"
          :key="index"
        >
          <el-checkbox v-model="item.checked"></el-checkbox>
          <p @click="onChoose('distingct', index)">{{ item.name }}</p>
        </div>
      </div>
    </div>
    <div class="col select-list">
      <div class="title">
        <span>已选：{{ selectList.length }}</span>
        <span class="clear" @click="clear">清空</span>
      </div>
    </div>
    <span @click="getData">dd</span>
  </div>
</template>
<script>
import { chinaMap } from "../assets/data/cityies1";
export default {
  data() {
    return {
      chinaMap,
      showProvinceList:[],
      showCityList:[],
      showDistingct:[],
      municipalityCity: ["110000", "120000", "310000", "500000"],
      provinceInfo:{
        checkAll:false,
        touchedId:''
      },
      cityInfo:{
        checkAll:false,
        touchedId:''
      },
      distingctInfo:{
        checkAll:false,
        touchedId:''
      },
      selectList:[]
    };
  },
  watch: {
  },
  methods: {
    transData(){
      console.log(this.chinaMap)
      let _ = (data)=>{
        for(let i in data){
          data[i].checked = false
          if(data[i]?.child){
            _(data[i].child)
          }
        }
      }
      _(this.chinaMap)
      console.log(this.chinaMap)
    },
    onChangeProvinceAll(){},
    onChangeCity(){},
    clear() {},
    getData(){}
  },
  mounted() {
    this.transData();
  },
};
</script>
<style scoped>
.city-picker {
  display: flex;
  margin: 30px;
}
.city-picker .col {
  flex: 1;
  border: 1px solid #ccc;
  min-width: 200px;
}

.city-picker .col:nth-child(2),
.city-picker .col:nth-child(3) {
  border-left: 0;
}
.city-picker .col.select-list {
  margin-left: 20px;
  border-left: 1px solid #ccc;
}
.city-picker .col.select-list .title {
  display: flex;
  justify-content: space-between;
}
.city-picker .col.select-list .title .clear {
  color: #197afb;
  cursor: pointer;
}
.city-picker .title {
  background: #fafbff;
  padding: 10px;
  font-size: 14px;
  border-bottom: 1px solid #ccc;
}
.city-picker .select-box {
  height: 350px;
  overflow: auto;
  min-width: 200px;
  flex: 1;
}
.city-picker .select-box .all-check {
  padding: 10px 0 0 10px;
}
.city-picker .select-box .select {
  color: #656366;
  font-size: 14px;
  margin: 5px 0;
  display: flex;
  align-items: center;
  padding: 5px 10px;
}
.city-picker .select-box .select.touched {
  color: #409eff;
}
.city-picker .select-box .select:hover {
  background: #f5f7fa;
}
.city-picker .select-box .select p {
  flex: 1;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  padding-left: 8px;
  cursor: pointer;
}
.city-picker
  .select-box
  .select
  p:ac
  .city-picker
  .select-box
  .select
  .check-icon {
  width: 20px;
  height: 20px;
}

.city-picker .select-box::-webkit-scrollbar {
  width: 10px;
  height: 1px;
}
.city-picker .select-box::-webkit-scrollbar-thumb {
  border-radius: 10px;
  height: 20px;
  background: #dddee2;
}
.city-picker .select-box::-webkit-scrollbar-track {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.05);
}
</style>
